<template>
  <div class="my-activities-container">
    <LoadingNodata :loading="loading" :data="activeList">
      <div class="my-activities" v-for="(item, index) in activeList" :key="index">
        <div class="image">
          <img :src="item.thumburl" alt="" />
        </div>
        <div class="name">
          {{ item.title }}
        </div>
      </div>
    </LoadingNodata>
    <div class="pagination">
      <Pagination :total="total" :current-page="page" :page-size="pageSize" @page-change="handlePageChange" />
    </div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { myActivityList } from "@/service/personalCenter";
import Pagination from "@/components/Pagination";
import LoadingNodata from "@/components/LoadingNodata";
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const activeList = ref([]);
const loading = ref(false);
onMounted(() => {
  fetchActiveList();
});
const fetchActiveList = async () => {
  loading.value = true;
  const res = await myActivityList({
    page: page.value,
    rows: pageSize.value,
  });
  if (res && res.data) {
    activeList.value = res.data.result || [];
    total.value = res.data.totalCount || 0; 
  }
  loading.value = false;
};
const handlePageChange = (newPage) => {
  page.value = newPage;
  fetchActiveList();
};
</script>

<style lang="scss" scoped>
.my-activities {
  margin: 15px 10px 0 10px;
  display: flex;
  .image {
    width: 80px;
    height: 60px;
    background-color: #d9d9d9;
    border-radius: 4px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .name {
    margin-left: 10px;
  }
}
</style>
